<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <!--
            use：复制绘图
                href：指定复制的目标，通常是id属性，需要加【#】
                x、y：相对坐标，默认不写时参照基准是原点(0,0)，即被复制的绘图目标的位置
        -->
        <svg width="300" height="300" style="background: cyan">
            <circle id="myCircle" cx="50" cy="100" r="20" fill="red" stroke="blue" stroke-width="5"></circle>
            <use href="#myCircle" x="0" y="50"></use>
        </svg>
        <!--
            g：
                组（group），多个绘图打包成一组，方便复制、复用，通常结合defs使用
                id：指定id属性，方便其它地方利用href复用
            defs：
                “仅供引用”，类似函数声明定义，没有调用时就不起作用
        -->
        <svg width="600" height="300" style="background: cyan">
            <!-- 声明、调用一体 -->
            <g id="myG01">
                <circle cx="40" cy="100" r="20"></circle>
                <circle cx="100" cy="180" r="70"></circle>
                <circle cx="160" cy="100" r="20"></circle>
            </g>
            <!-- 仅调用 -->
            <use href="#myG01" x="200" y="0" fill="red"></use>
            <!-- 仅声明 -->
            <defs>
                <g id="myG02">
                    <circle cx="40" cy="100" r="20"></circle>
                    <circle cx="100" cy="180" r="70"></circle>
                    <circle cx="160" cy="100" r="20"></circle>
                </g>
            </defs>
            <!-- 仅调用 -->
            <use href="#myG02" x="400" y="0" fill="gold"></use>
        </svg>
        <!-- 
            pattern
                自定义图案花纹样式，然后用它去平铺填充某个区域，通常结合defs使用
                patternUnits="userSpaceOnUse"
                    表示宽高是实际像素值
                id
                    定义id属性，方便其它区域利用fill引用它去平铺填充，fill="url(#id名)"
         -->
        <svg width="300" height="300" style="background: cyan">
            <!-- pattern：定义图案 -->
            <defs>
                <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                    <circle cx="10" cy="10" r="7" fill="red"></circle>
                </pattern>
            </defs>
            <!-- fill：填充平铺 -->
            <rect x="0" y="0" width="100%" height="100%" fill="url(#myPattern)"></rect>
        </svg>
        <!-- 
            image
                xlink:href="图片路径"
                svg除了绘制矢量图以外，还能直接插入图片
                几乎不用，因为图片和矢量图混用，在放大或缩小时图片会失真
         -->
        <svg width="300" height="300" style="background: cyan">
            <image xlink:href="./images/test.png" width="50%" height="50%"></image>
        </svg>
    </body>
</html>
